<template>
    <div>
        <el-dialog v-model="props.orderDialog" title="查看订单信息" draggable width="70%" @close="handleClose" class="dialogs"
            @open="handleOpenDialogAdd">
            <el-form :model="AddValue" :rules="rulesAdd" ref="ruleFormRefAdd" label-width="100px">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="产品编号" prop="productCode" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.productCode" placeholder="请选择产品" clearable>
                                <template #append>
                                    <el-button :icon="Search" @click="showDialogPro"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品名称" prop="productName" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.productName" placeholder="请选择产品" readonly clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品规格" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.productSpec" placeholder="请选择产品" readonly clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="订单编码" prop="clientOrderCode" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.clientOrderCode" placeholder="请输入订单编码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户编码" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.clientCode" placeholder="请选择客户" clearable>
                                <template #append>
                                    <el-button :icon="Search" @click="showDialogCustomer"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户名称" prop="clientName" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.clientName" placeholder="请输入客户名称" readonly clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="订货日期" prop="orderDate" :class="{ 'bold-label': true }">
                            <el-date-picker v-model="AddValue.orderDate" type="date" placeholder="请选择订货日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交货日期" prop="deliveryDate" :class="{ 'bold-label': true }">
                            <el-date-picker v-model="AddValue.deliveryDate" type="date" placeholder="请选择交货日期" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="订货数量" prop="orderQuantity" :class="{ 'bold-label': true }">
                            <el-input-number v-model="AddValue.orderQuantity" :min="1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位" :class="{ 'bold-label': true }">
                            <el-select v-model="AddValue.unitOfMeasure" placeholder="请选择" style="width: 240px">
                                <el-option v-for="item in props.units" :key="item.id" :label="item.unitName"
                                    :value="item.unit" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="规格型号" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.spec" placeholder="请输入规格型号" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="质量要求" :class="{ 'bold-label': true }">
                            <el-input v-model="AddValue.qualityRequirement" type="textarea" :rows="2"
                                placeholder="请输入质量要求">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Visible">取消</el-button>
                </div>
            </template>
            <div>
                <el-tabs type="border-card" class="shadow-tabs">
                    <el-tab-pane label="物料需求">
                        <el-table :data="props.materialList" style="width: 100%">
                            <el-table-column type="expand">
                                <template #default="{ row }">
                                    <div class="flex-container">
                                        <p class="flex-item">物料编码: {{ row.itemCode }}</p>
                                        <p class="flex-item">物料名称: {{ row.itemName }}</p>
                                        <p class="flex-item">物料规格: {{ row.specification }}</p>
                                        <template v-for="(warehouse, index) in row.inventory?.warehouseList"
                                            :key="index">
                                            <p class="flex-item">所在仓库: {{ warehouse.warehouseName }}</p>
                                            <p class="flex-item">仓库编码: {{ warehouse.warehouseCode }}</p>
                                        </template>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="层级" align="center">
                                <template #default="{ row }">
                                    <span v-if="row.level == 1">第一层</span>
                                    <span v-if="row.level == 2">第二层</span>
                                    <span v-if="row.level == 3">第三层</span>
                                    <span v-if="row.level == 4">第四层</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="添加物料" align="center">
                                <template #default="{ row }">
                                    <el-button disabled :icon="CirclePlus" @click="showDialogWL"></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="物料名称" prop="itemName" align="center" />
                            <el-table-column label="需求数量" align="center">
                                <template #default="{ row }">
                                    <span>{{ row.quantity }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="库存量" align="center">
                                <template #default="{ row }">
                                    <el-tooltip
                                        :content="row.inventory.inventoryQuantity >= row.quantity ? '库存充足' : '库存不足'"
                                        placement="top">
                                        <span class="slClass">{{ row.inventory.inventoryQuantity }}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="单位" prop="unitName" align="center" />
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <!-- 产品选择弹窗 -->
        <ProSelectionDialog :ProDialog="dialogVisiblePro" @close-dialog="colseDialog" @rowDataP="rowDataP" />
        <!-- 客户选择弹窗 -->
        <CustomerSelectionDialog :CustomerDialog="dialogVisibleCustomer" @close-dialog="colseDialog"
            @rowDataA="rowData" />
        <!-- 物料选择弹窗 -->
        <WlselectionDialog :WlDialog="dialogVisibleWl" @close-dialog="colseDialog" @rowDataWl="rowDataWl" />
    </div>
</template>

<script setup>
import CustomerSelectionDialog from '@/components/CustomerOrders/CustomerSelectionDialog.vue';
import ProSelectionDialog from '@/components/CustomerOrders/ProSelectionDialog.vue';
import WlselectionDialog from './WlselectionDialog.vue';
import { reactive, ref, nextTick } from 'vue';
import { Search, CirclePlus } from '@element-plus/icons-vue';
const props = defineProps(['orderDialog', 'materialList', 'AddValue']);
const emit = defineEmits(['close-dialog']);
const dialogVisiblePro = ref(false);//产品选择弹窗
const dialogVisibleCustomer = ref(false);//客户选择弹窗
const dialogVisibleWl = ref(false);//物料选择弹窗

const AddValue = props.AddValue
const showDialogPro = () => {//Go产品选择
    dialogVisiblePro.value = true;
}
const showDialogCustomer = () => {//Go客户选择
    dialogVisibleCustomer.value = true;
}
const showDialogWL = () => {//GO物料添加
    dialogVisibleWl.value = true;
}
//清空后的表单数据
const ruleFormRefAdd = ref();
//定义响应式对象，用于重置表单
const resetFormAdd = reactive({ ...AddValue });
//验证规则对象
const rulesAdd = {
    productCode: [{
        required: true,//必填项
        message: "产品编号不能为空",//提示错误信息
        trigger: "blur"//触发验证的时机，当失去焦点时触发
    }],
    productName: [{
        required: true,
        message: "产品名称不能为空",
        trigger: "blur"
    }],
    clientOrderCode: [{
        required: true,
        message: "订单编码不能为空",
        trigger: "blur"
    }],
    clientName: [{
        required: true,
        message: "客户名称不能为空",
        trigger: "blur"
    }],
    orderDate: [{
        required: true,
        message: "订货日期不能为空",
        trigger: "blur"
    }],
    deliveryDate: [{
        required: true,
        message: "交货日期不能为空",
        trigger: "blur"
    }],
    orderQuantity: [{
        required: true,
        message: "订货数量不能为空",
        trigger: "blur"
    }],
};
//打开对话框的处理函数
const handleOpenDialogAdd = () => {
    nextTick(() => {
        //清空校验（清空表单校验结果，以便用户重新输入数据）
        ruleFormRefAdd.value.clearValidate()
    })
};

const rowData = (row) => {
    console.log("客户数据：", row);
    AddValue.clientId = row.customerId;
    AddValue.clientCode = row.customerCode;
    AddValue.clientName = row.customerName;
}
const rowDataP = (row) => {
    console.log("产品数据：", row);
    AddValue.productId = row.materialNo;
    AddValue.productCode = row.materialProductCode;
    AddValue.productName = row.productName;
    AddValue.productSpec = row.specificationAndModel;
    AddValue.unitOfMeasure = row.unitName;
}
const rowDataWl = (row) => {
    console.log("物料数据", row);
}
//关闭弹窗
const handleClose = () => {
    Object.assign(AddValue, resetFormAdd)
    emit('close-dialog');
}
//弹窗取消事件
const Visible = () => {
    emit('close-dialog');
}
//关闭弹窗事件
const colseDialog = async () => {
    dialogVisibleCustomer.value = false;
    dialogVisiblePro.value = false;
    dialogVisibleWl.value = false;
}
</script>

<style scoped>
.flex-container {
    display: flex;
    align-items: center;
    gap: 16px;
    /* 16px 的水平间距 */
}

.flex-item {
    margin-bottom: 8px;
    /* 底部间距 */
}

.shadow-tabs {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    overflow: hidden;
}

.slClass {
    background-color: #e8f4ff;
    border-color: #d1e9ff;
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: #1890ff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}
</style>
